<template>
    <div class="ft-wrap seamless" :class="{ sticky,full: fullHeight }">
      <el-tabs v-model="inner" class="ft-tabs" @tab-change="onChange">
        <el-tab-pane
          v-for="t in tabs"
          :key="t.key"
          :label="t.label"
          :name="t.key"
          :disabled="t.disabled"
        />
      </el-tabs>
  
      <div class="ft-content" :style="contentStyle">
        <!-- 插槽由父组件决定如何渲染当前面板内容 -->
        <slot name="content" :active="active"></slot>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed, ref, watch } from 'vue'
  
  const props = defineProps({
    tabs: { type: Array, required: true }, // [{key,label,disabled?}]
    modelValue: { type: [String, Number], default: undefined },
    defaultActive: { type: [String, Number], default: undefined },
    sticky: { type: Boolean, default: false }, // 需要顶部吸附时可开
    
    // ✅ 新增：两种可选的滚动限制
  contentMaxHeight: { type: [String, Number], default: null }, // 如 480 或 '60vh'
  fitWindow: { type: Boolean, default: false },                 // 用窗口高度自动算
  fitOffset: { type: Number, default: 120 },                    // 预留头部/面包屑的像素
  })
  const emit = defineEmits(['update:modelValue','change'])
  const contentStyle = computed(() => {
  const st = {}
  if (props.fitWindow) {
    st.maxHeight = `calc(100vh - ${props.fitOffset}px)`
    st.overflow = 'auto'
  } else if (props.contentMaxHeight != null) {
    st.maxHeight = typeof props.contentMaxHeight === 'number'
      ? props.contentMaxHeight + 'px'
      : String(props.contentMaxHeight)
    st.overflow = 'auto'
  }
  return st
})
  
  const innerRef = ref(props.defaultActive ?? props.tabs?.[0]?.key)
  const controlled = computed(() => props.modelValue !== undefined)
  
  watch(() => props.modelValue, v => { if (controlled.value) innerRef.value = v })
  const inner = computed({
    get: () => (controlled.value ? props.modelValue : innerRef.value),
    set: v => {
      if (!controlled.value) innerRef.value = v
      emit('update:modelValue', v)
    }
  })
  const active = computed(() => props.tabs.find(t => t.key === inner.value))
  
  function onChange() {
    emit('change', active.value || null)
  }
  </script>
  
  <style scoped>
  /* 主题色可从外部覆盖：<FeatureTabs style="--ft-primary:#3E8CF0"> */
:root { --ft-primary: #409eff; }

.ft-wrap { display:block;  }

/* 顶部标签：去掉默认下边线，做成更轻的导航条 */
.ft-tabs {
  padding: 8px 16px 0;
  background: transparent;  
}
:deep(.el-tabs__nav-wrap)::after { display:none; }
:deep(.el-tabs__header) { margin: 0 0 8px; }
:deep(.el-tabs__nav) { gap: 4px; }
:deep(.el-tabs__item) {
  color: #606266;
  padding: 0 18px;
  height: 42px;
  line-height: 42px;
  transition: color .2s ease, background .2s ease;
  border-radius: 8px 8px 0 0;
}
:deep(.el-tabs__item:hover) {
  color: var(--ft-primary);
  background: #f6f9ff;
}
/* 激活态：蓝色、稍微加粗，底部粗一些的蓝色条 */
:deep(.el-tabs__item.is-active) {
  color: var(--ft-primary);
  font-weight: 600;
}
:deep(.el-tabs__active-bar) {
  height: 3px;
  background-color: var(--ft-primary);
  border-radius: 3px;
}

/* 内容卡片：更像截图的白卡 + 圆角 + 阴影 + 合理内边距 */
.ft-content {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.02);
  border: 1px solid #f0f2f5; 
}

/* 可选：需要“顶部吸附”时，给组件传 sticky，标签会吸顶 */
.ft-wrap.sticky .ft-tabs {
  position: sticky; top: 0; z-index: 10; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}


/* —— 无缝接壤模式 —— */
.ft-wrap.seamless .ft-tabs {
  padding: 8px 16px 0;
}

/* 去掉默认分隔线、隐藏激活蓝条（避免破坏接缝） */
.ft-wrap.seamless :deep(.el-tabs__nav-wrap)::after { display: none; }
.ft-wrap.seamless :deep(.el-tabs__active-bar) { display: none; }

/* 激活标签做成“白色卡片顶边”样式，并盖住下面卡片的上边框 */
.ft-wrap.seamless :deep(.el-tabs__item.is-active) {
  color: var(--ft-primary, #409eff);
  font-weight: 600;
  background: #fff;
  border: 1px solid #f0f2f5;
  border-bottom-color: transparent;          /* 关键点：去掉底边，让它和下面卡片边框衔接 */
  border-radius: 12px 12px 0 0;
  position: relative;
  z-index: 2;                                /* 盖在内容卡片上方 */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* 未激活的 hover 态轻一点即可 */
/* .ft-wrap.seamless :deep(.el-tabs__item:hover) {
  color: var(--ft-primary, #409eff);
  background: #f6f9ff;
} */

/* 内容卡片：把顶部往上“抬”1px，让边框对齐，并去掉左上圆角与激活标签贴合 */
.ft-wrap.seamless .ft-content {
  background: #fff;
  border: 1px solid #f0f2f5;
  border-top-left-radius: 0;                 /* 让左上角由激活标签的圆角来承担 */
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-top: -1px;                          /* 关键点：与激活标签的下边缘无缝对齐 */
  padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.02);
}

/* 让 tabs 与内容之间没有额外间距 */
.ft-wrap.seamless :deep(.el-tabs__header) { margin-bottom: 0; }

/* （可选）左上角的小“耳朵”若还露白，减小激活项圆角或加一点上内边距
   一般上面的设置已经贴合，如还想更圆润可微调： 
   border-radius: 10px 10px 0 0; 或 .ft-tabs { padding-left: 8px; } */



   /* 外层：<div class="ft-wrap seamless"> */
.ft-wrap.seamless .ft-tabs{
  /* 去掉左侧内边距，和内容卡片左边对齐 */
  padding: 8px 0 0;         /* ← 原来若有 padding-left:16，会产生左侧空隙 */
}
.ft-wrap.seamless :deep(.el-tabs__nav-wrap)::after{ display:none; }
.ft-wrap.seamless :deep(.el-tabs__active-bar){ display:none; }

/* 激活项做成白底卡片，底边透明，盖住下面卡片的上边框 */
.ft-wrap.seamless :deep(.el-tabs__item.is-active){
  color: var(--ft-primary, #409eff);
  background:#fff;
  border:1px solid #f0f2f5;
  border-bottom-color: transparent;
  border-radius:12px 12px 0 0;
  position:relative; z-index:2;
  font-weight:600;
}

/* 内容卡片：去掉左上圆角；向上抬 1px 与标签边框接缝 */
.ft-wrap.seamless .ft-content{
  background:#fff;
  border:1px solid #f0f2f5;
  border-top-left-radius:0 !important;  /* 关键：不再露白耳朵 */
  border-top-right-radius:12px;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  margin-top:-1px;                      /* 与上方标签无缝 */
  padding:18px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.02);
}

/* 去掉 tabs 与内容之间的间距 */
.ft-wrap.seamless :deep(.el-tabs__header){ margin-bottom:0; }


/* 统一高度，flex 居中，取消用 line-height 居中 */
.ft-wrap.seamless :deep(.el-tabs__item){
  box-sizing: border-box;
  height: 40px;            /* 跟你的头部期望高度一致 */
  padding: 0 18px;         /* 只保留左右内边距，去掉上下内边距 */
  line-height: normal;     /* 取消 40px 的行高 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：水平也居中 */
}

/* 激活态仍保持“白底卡片”，不要再加上下 padding */
.ft-wrap.seamless :deep(.el-tabs__item.is-active){
  background: #fff;
  border: 1px solid #f0f2f5;
  border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  font-weight: 600;
}

/* 无缝接壤的其余设置（若已加可忽略） */
.ft-wrap.seamless :deep(.el-tabs__nav-wrap)::after{ display:none; }
.ft-wrap.seamless :deep(.el-tabs__active-bar){ display:none; }
.ft-wrap.seamless :deep(.el-tabs__header){ margin-bottom:0; }
.ft-wrap.seamless .ft-content{
  margin-top:-1px; border-top-left-radius:0; /* 与上方卡片贴合 */
}



  </style>
  